<template>
  <div class="app-container">
    <el-card>
      <LiveOverview :tabs="tabs" @refresh="refresh" />
    </el-card>

    <el-card class="mt-20">
      <PageTable :loading="loading" :columns="columns" :data="dataSource" />
      <Pagination
        v-show="total > 0"
        :total="total"
        :pageNo.sync="listQuery.pageNo"
        :pageSize.sync="listQuery.pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
import { useFilterSingleStatistics } from '@/hooks'
export default {
  name: 'MessageDetail',
  props: {},
  data() {
    return {
      loading: true,
      total: 10,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      columns: [
        {
          label: '短信内容',
          prop: 'content'
        },
        {
          label: '发送客户',
          prop: 'name'
        },
        {
          label: '所属地区',
          prop: 'area'
        },
        {
          label: '发送时间',
          prop: 'createdTime'
        },
        {
          label: '发送状态',
          render: (h, { row }) => {
            return (
              <div>
                <span style={row.status === 0 ? 'color: #fc4541' : ''}>
                  {row.status === 0 ? '发送失败' : '发送成功'}
                </span>
              </div>
            )
          }
        },
        {
          label: '数量',
          render: (h, { row }) => {
            return <span>1</span>
          }
        }
      ],
      dataSource: [],
      tabs: [
        {
          isShow: true,
          baseData: {
            label: '短信总发送条数',
            key: 'sum',
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            label: '发送成功',
            key: 'succeed',
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            label: '发送失败',
            key: 'err'
          }
        }
      ]
    }
  },
  created() {
    this.getStatisticsCount()
    this.getList()
  },
  methods: {
    // 获取实时概况数据
    async getStatisticsCount() {
      const { id } = this.$route.query
      const { data } = await this.$http.message.massApi.statisticsDetail(id)
      this.getRealTimeConfig(data)
    },
    // 刷新实时概况数据
    refresh() {
      this.getStatisticsCount()
      this.$message.success('更新成功')
    },
    // 获取实时数据配置
    getRealTimeConfig(data) {
      this.tabs = useFilterSingleStatistics(this.tabs, data)
    },
    // 获取明细列表
    async getList() {
      const params = {
        smsMassId: this.$route.query.id,
        ...this.listQuery
      }
      const {
        data: { records, total }
      } = await this.$http.message.massApi.getDetailList({ params })
      this.total = total
      this.dataSource = records
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped></style>
